<template>
  <div class="check_center">
  <el-dialog
    :title="'[ ' + name + ' ] ' + '矫正经纬度'"
    :visible.sync="dialogVisible"
    @close="closePopup(false)"
    center
    width="50%" :append-to-body="true">

    <div class="map_main"  v-loading="loading">
      <div>
        <div class="item_box">
          <div class="operate_box" style="height:30px;">
            <div class="operate_item" style="width: 100%;">
              <label>中心点坐标：</label>
              <span v-if="lng">{{ '[ ' + pLng + ',' + pLat + ' ]' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="map">
        <div class="top_input" id="myPageTop">
          <span>请输入关键字：</span>
          <input type="text" id="tipinput"></input>
        </div>
        <img src="../../assets/img/icon/location.png" class="center_mark" style="width:30px;height:30px" />
        <div id="allmap" style="width:100%;height:530px;"></div>
      </div>
      <p class="tip">提示：调整地图缩放比例，选中地图中心点,点击确定中心点保存数据</p>
    </div>


    <span slot="footer" class="dialog-footer">
      <el-button @click="closePopup(false)">取 消</el-button>
      <el-button type="primary" @click="getZooms">确 定</el-button>
    </span>
  </el-dialog>
  </div>


</template>

<script>

import {updateAddress} from "@/api/basic/warehouse/index"
import {checkCenter} from "@/api/data/user/address"

export default {
  props: ['id', 'type','name','position'],
  data() {
    let self = this
    return {
      map: {},
      lat: '',
      lng: '',
      zoom: 20,
      mapStyle: ' amap://styles/blue',
      latObj: '',
      lngObj: '',
      pLng: '',
      pLat: '',
      dialogVisible: true,
      loading: false
    }
  },

  mounted() {
    this.loading = true;

    this.$nextTick(() => {
      this.createMap()
    })

  },

  methods: {
    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    },

    createMap() {
      let self = this;
      this.map = new AMap.Map("allmap", {
        resizeEnable: true,
        center: this.position.lng ? [parseFloat(this.position.lng), parseFloat(this.position.lat)] : [118.094604, 24.470392],
        zoom: 20,
        mapStyle: self.mapStyle
      });

      this.lng = this.pLng = this.position.lng ? parseFloat(this.position.lng) : 118.094604;
      this.lat = this.pLat = this.position.lat ?  parseFloat(this.position.lat) : 24.470392;

      this.map.on('click', self.showInfoClick);
      this.map.on('dragend', self.showInfoDragend);

      //输入提示
      var autoOptions = {
        input: "tipinput"
      };
      var auto = new AMap.AutoComplete(autoOptions);
      auto.on("select", self.select);
      this.loading = false;
    },

    select(e) {
      let that = this;
      var placeSearch = new AMap.PlaceSearch({
        map: that.map
      });
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name);  //关键字查询查询

    },


    // 点击地图
    showInfoClick(e) {
    },

    // 拖拽地图
    showInfoDragend(e) {
      let that = this;
      var center = this.map.getCenter();
      that.zoom = this.map.getZoom();
      if (that.latObj && that.lngObj) {
        that.latObj.innerText = center.lat;
        that.lngObj.innerText = center.lng;
        that.lng = center.lng;
        that.lat = center.lat;
      } else {
        that.pLng = center.lng;
        that.pLat = center.lat;
      }
    },

    getZooms() {
      let tip = this.type === 1 ? '确定设置该坐标为仓库地址?' : '确定设置该坐标为用户收货地址?';
      let that = this;
      that.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendData();

      })
    },
    sendData() {
      let data = {
        id: this.id,
        lng: this.pLng,
        lat: this.pLat
      }
      if (this.type === 1) {
        updateAddress(data).then((res) => {
          this.closePopup(1);
        })
      } else {
        checkCenter(data).then((res) => {
          this.closePopup(1);
        })
      }
    }
  }
}
</script>
<style>
.amap-sug-result {
  z-index: 9999 !important;
}
.amap-logo {
  display: none !important;
}
.amap-copyright {
  opacity:0 !important;
}
.el-dialog__header{
  padding:10px 20px 5px !important;
}
.check_center .el-dialog__body {
  padding:10px 10px 5px !important;
}
.el-dialog__footer {
  padding: 0 10px 15px !important;
}
.el-dialog__title {
  font-weight: 700;
  font-size: 20px;
}
</style>


<style scoped>
.operate_item {
  padding-bottom: 0 !important;
}

.tip {
  color: #3a8ee6;
}

.map_box {
  position: fixed;
  top: 15%;
  left: 50%;
  margin-left: -300px;
  z-index: 1010;
  background: #fff;
  width: 600px;
  overflow: hidden !important;
}


.map {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 530px;
  margin: 10px 0 15px;
}

.center_mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
}

.top_input {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  z-index: 10000;
  padding: 5px;
}

.top_input input {
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  border: none;
  outline: none;
}

</style>
